<!--
 @description 订单收款
 @fileName index.vue
 @author zengqiongying
 @created 2022/08/07 18:23:38
-->
<template>
  <div class="mine-container">
    <MineHeader arrow title="收款" bg-color="#F5F6F7" :back-func="handleBackPage" />
    <div class="settle-foot">
      <div class="total-price">合计： <span class="price">{{ totalFee }}</span></div>
      <div class="btn-submit" :class="{'disable':totalFee<=0}" @click="handleSubmit">完成收款</div>
    </div>
    <div class="settle-container">
      <div v-for="(item,i) in list" :key="i" class="s-group">
        <div class="label">
          <img v-if="item.icon" class="icon" :src="item.icon">
          <span>{{ item.name }}</span>
        </div>
        <div class="fee-field">
          <van-field
            v-model="item.fee"
            format-trigger="onBlur"
            :formatter="formatterPrice"
            class="fee-input"
            type="number"
            label=""
            @focus="onFocus(item)"
          />
          <div class="unit">元</div>
        </div>
      </div>
    </div>
    <Popup
      v-if="submitPop.show"
      v-model="submitPop.show"
      msg-align="center"
      :icon="submitPop.icon"
      :show-cancel-button="submitPop.showCancel"
      :cancel-button-text="submitPop.cancelText"
      :confirm-button-text="submitPop.confirmText"
      @confirm="handlePopConfirm"
      @cancel="handlePopCancel"
    >
      <div class="submit-pop-content">
        <div>{{ submitPop.message }}</div>
        <div v-if="submitPop.warningMsg" class="warning-txt">
          {{ submitPop.warningMsg }}
        </div>
      </div>
    </Popup>
  </div>
</template>

<script>
import Popup from '@/components/Popup'
import { getDictByType } from '@/apis/dataDict'
import { saveOrderSettlement } from '@/apis/order'
export default {
  name: 'OrderSettle',
  components: {
    Popup
  },
  data() {
    return {
      retailOrderId: this.$route.params.id || '',
      totalPrice: this.$route.query.fee || 0,
      list: [],
      submitPop: {
        type: '', // 成功pop提示：succes , 失败pop提示：error
        message: '',
        show: false,
        icon: 'success',
        cancelText: '取消',
        confirmText: '确定',
        warningMsg: ''
      } // 提交订单后提示信息
    }
  },

  computed: {
    totalFee() {
      let total = 0
      this.list.forEach(v => {
        const fee = Number(v.fee || 0)
        total += fee
      })
      return Math.floor(total * 100) / 100
    }
  },
  watch: {

  },
  created() {
    this.initListData()
  },
  mounted() {

  },

  methods: {
    async initListData() {
      const list = await getDictByType({
        dictTypeCode: 'SETTLEMENT_METHOD',
        appCode: 'retail'
      })
      this.list = list.map(v => {
        return {
          payMode: v.dictCode,
          name: v.dictName,
          fee: '0',
          icon: this.getIcon(v.dictCode)
        }
      })

      /* const fee = this.$route.query.fee || 0
      this.$set(this.list[0], 'fee', fee)
      this.totalPrice = Number(fee).toFixed(2) */
    },
    getIcon(val) {
      const mode = ['01', '02', '03', '04', '05', '06', '07']
      const t = mode.indexOf(val)
      if (t === -1) {
        return ''
      }
      return require('@/assets/payMode/icon' + t + '.png')
    },
    // 格式化销售价格
    formatterPrice(value) {
      const val = Math.floor(value * 100) / 100
      if (val < 0) {
        this.$toast('输入费用不能小于0')
        return '0'
      }
      return val
    },
    onFocus(item) {
      if (Number(item.fee || 0) === 0) {
        this.$set(item, 'fee', '')
      }
    },
    onBlur(item) {
      if (Number(item.fee || 0) === 0) {
        this.$set(item, 'fee', '0')
      }
    },
    handleSubmit() {
      if (this.totalFee <= 0) {
        return
      }
      /* if (this.totalFee <= 0) {
        this.$toast('收款总额必须大于0')
        return
      }
      if (this.totalFee !== Number(this.totalPrice)) {
        this.$toat('收款总额跟应收总额不一致')
        return
      } */
      const receiptDetails = this.list.filter(v => Number(v.fee || 0) > 0).map(v => {
        return {
          payMode: v.payMode,
          fee: v.fee
        }
      })
      if (receiptDetails.length === 0) {
        this.$toast('收款总额必须大于0')
        return
      }
      const params = {
        retailOrderId: this.retailOrderId, receiptDetails
      }
      saveOrderSettlement(params).then(res => {
        if (res.success === 1) {
          this.$toast('收款成功')
          this.$router.replace({
            path: '/my/order'
          })
        }
      }).catch((msg) => {
        this.submitPop = {
          type: 'error',
          show: true,
          icon: 'error',
          showCancel: false,
          cancelText: '取消',
          confirmText: '确定',
          message: msg || '订单收款失败，请稍后重试！',
          warningMsg: false
        }
      })
    },
    handleBackPage() {
      this.submitPop = {
        type: 'warning',
        show: true,
        icon: 'warning',
        showCancel: true,
        cancelText: '不收款',
        confirmText: '继续收款',
        message: '还未完成收款，是否确认返回?',
        warningMsg: '注意：若暂时不进行收款，后续可在电脑端进行收款'
      }
    },
    handlePopConfirm() {
      this.submitPop.show = false
    },
    handlePopCancel() {
      this.submitPop.show = false
      this.$router.replace({
        path: '/my/order'
      })
    }
  }
}

</script>
<style lang='less' scoped>
  .settle-foot{
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12PX 16PX 22PX;
    height: 74PX;
    box-sizing: border-box;
    background: #F5F6F7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .total-price{
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 12PX;
      .price{
        display: flex;
        align-items: center;
        font-size: 20PX;
        font-weight: 500;
        color: #EA5B31;
        line-height: 28PX;
        &::before{
          content: '¥';
          font-size: 12PX;
          margin-right: 4px;
        }
      }
    }
    .btn-submit{
      margin-left:10px;
      width: 130px;
      height: 40PX;
      background: linear-gradient(180deg, #F6945F 0%, #EA5B31 100%);
      border-radius: 21PX;
      color: #FFFFFF;
      font-weight: bold;
      font-size: 14PX;
      line-height: 40PX;
      text-align: center;
      letter-spacing: 1px;
      &.disable{
        background: rgba(229, 230, 233, 0.5);
        color: #999;
      }
    }
  }
  .settle-container{
    padding: 16px 16px 74PX;
    .s-group{
      margin-bottom: 10px;
      padding: 15px 12px;
      background: #FFFFFF;
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .label{
      font-size: 16px;
      color: #111111;
      line-height: 22px;
      display: flex;
      align-items: center;
      .icon{
        width: 24px;
        height: 24px;
        margin-right: 6px;
      }
    }
    .fee-field{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .fee-input{
        padding: 0;
        width: 85px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        box-sizing: border-box;
        background: rgba(229, 230, 233, 0.5);
        border-radius: 4px;
        /deep/.van-field__control{
          text-align: center;
          color: #111111;
          font-weight: bold;
          font-size: 16px;
        }
      }
      .unit{
        font-size: 16px;
        color:#999999 ;
        margin-left:6px;
      }
    }
  }
  .submit-pop-content{
    padding-bottom: 15px;
    line-height: 24px;
    font-size: 18px;
    text-align: center;
    color: #343640;
    font-weight: bold;
    .warning-txt{
      margin-top: 17px;
      font-size: 12px;
      font-weight: normal;
      color: #FF634C;
      line-height: 20px;
    }
  }
</style>
